<template>
    <el-form :inline="true" :style="{ border: 'none', height: cardShowHeight }" >
        <el-row>
            <el-col :span="18">
                <el-form-item label="用户搜索:">
                    <el-input v-model="searchData.searchValue" placeholder="请输入用户" clearable>
                        <template #prepend>
                            <el-select v-model="searchData.searchType" placeholder="请选择" style="width: 86px" clearable>
                                <el-option label="全部" value="" />
                                <el-option label="UID" value="_id" />
                                <el-option label="手机号" value="phone" />
                                <el-option label="用户昵称" value="name" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="用户等级:">
                    <el-select placeholder="请选择用户等级" v-model="searchData.searchLevel" clearable>
                        <el-option v-for="item in userLevelData.rows" :key="item._id" :label="item.name"
                            :value="item._id as string" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户分组:">
                    <el-select placeholder="请选择用户分组" v-model="searchData.searchGroup" clearable>
                        <el-option v-for="item in userGroupData.rows" :key="item._id" :label="item.name"
                            :value="item._id as string" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>
                <el-form-item label="用户搜索:">
                    <el-input />
                </el-form-item>

            </el-col>
            <el-col :span="6" style="display: flex;  justify-content: end; flex-shrink: 0;">
                <div>
                    <el-button type="primary" @click="onSearchBtn">搜索</el-button>
                    <el-button @click="resetBtn">重置</el-button>
                    <el-button link type="primary" v-if="cardShowHeight == '50px'" @click="cardShowHeight = 'auto'">
                        <span>展开</span>
                        <el-icon class="el-icon--right">
                            <ArrowDown />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" v-else @click="cardShowHeight = '50px'">
                        <span>收起</span>
                        <el-icon class="el-icon--right">
                            <ArrowUp />
                        </el-icon>
                    </el-button>

                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { useFindData } from '@/composables/findData';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';
const cardShowHeight = ref('50px');
const searchData = defineModel<any>('searchData');
const emit = defineEmits(['getUserList']);

onMounted(() => { getUserLevelJoint(); getUserGroupApiJoint(); })

const { userLevelData, getUserLevelJoint, userGroupData, getUserGroupApiJoint } = useFindData();

function resetBtn() {
    searchData.value = {};
    emit('getUserList');
}

function onSearchBtn() {
    emit('getUserList');
}
</script>

<style scoped>
.el-form-item__content {
    width: 250px;
}
.el-input,
.el-select {
    width: 250px;
}

</style>
<style>
</style>
